<template>
  <div>
    <el-input
      placeholder="请输入内容"
      v-model="params.query"
      class="input-with-select"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="search"
      ></el-button>
    </el-input>

    <el-button type="primary" @click="addLog = true">添加</el-button>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="username" label="用户名" width="150">
      </el-table-column>
      <el-table-column prop="role_name" label="角色" width="120">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="120"> </el-table-column>

      <el-table-column prop="create_time" sortable label="创建时间" width="120">
        <template slot-scope="scope">
          <div>
            {{ scope.row.create_time | filtime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(scope.row.id, scope.row.mg_state)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.pagenum"
      :page-sizes="[1, 2, 3, 5, 10]"
      :page-size="params.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 分页器 -->

    <el-dialog :title="editId == -1 ? '添加' : '编辑'" :visible.sync="addLog">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            :disabled="editId == -1 ? false : true"
            v-model="ruleForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="editId == -1 ? true : false"
          label="密码"
          prop="password"
        >
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addLog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加和修改的对话框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      list: [],
      addLog: false,
      ruleForm: {
        username: "",
        password: "",
        mobile: "",
        email: "",
      },
      //添加弹框的v-model的值
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      //校验不能为空
      editId: -1,
      //编辑的id
      total: 0,
    };
  },
  methods: {
    getList() {
      this.$axios.get("/users", { params: this.params }).then((res) => {
        console.log(res);
        this.list = res.data.data.users;
        this.total = res.data.data.total;
        //拿到数据和总数
        if (this.total == 0) {
          this.$message({
            message: "没有数据",
          });
        }
      });
    },
    //拿到列表数据
    submit() {
      let regMobile = /^1[3,5,6,7,8,9][0-9]{9}$/;
      let regemail =
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if (this.editId == -1) {
        if (
          regMobile.test(this.ruleForm.mobile) &&
          regemail.test(this.ruleForm.email)
        ) {
          this.$axios.post("/users", this.ruleForm).then((res) => {
            console.log(res);
            if (res.data.meta.status == 201) {
              this.$message(res.data.meta.msg);
              this.getList();
              this.addLog = false;
            }
          });
        } else {
          alert("验证失败");
        }
        //正则验证手机号码和邮箱
      } else {
        this.$axios.put("/users/" + this.editId, this.ruleForm).then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.getList();
            this.addLog = false;
            this.editId = -1;
          }
        });
      }
      //   满足if就是添加 else就是编辑
      this.ruleForm = {
        username: "",
        password: "",
        mobile: "",
        email: "",
      };
      //   this.$refs.ruleForm.resetFields();
      //用element-ui的方法让 表单清空
    },
    //点击编辑和添加的弹框的确定按钮触发
    edit(row) {
      this.editId = row.id;
      this.addLog = true;
      this.ruleForm.username = row.username;
      this.ruleForm.email = row.email;
      this.ruleForm.mobile = row.mobile;
    },
    //点击编辑回填数据 要保存id
    changeState(id, state) {
      this.$axios.put(`users/${id}/state/${state}`).then((res) => {
        if (res.data.meta.status == 200) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
          this.getList();
        }
      });
    },
    //切换状态
    handleCurrentChange(val) {
      this.params.pagenum = val;
      this.getList();
    },
    //页码改变
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getList();
    },
    //每页多少条改变
    search() {
      this.getList();
    },
    //搜索功能
  },

  created() {
    this.getList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
  filters: {
    filtime(val) {
      let time = new Date(val * 1000).toLocaleString();
      return time;
    },
  },
};
</script>

<style lang="scss" scoped></style>
